<template>
  <div style="padding: 10px">
    <d-edit-table
      :data="tableData"
      :columns="columns"
      border
      ref="dEditTableRef"
      row-key="address"
      isEditRow
      isCreateRow
      disabled
      @confirm-row="confirmRow"
      @cancell-row="cancellRow">
      <template #append><div class="create-row" @click="createRow">新增行</div></template>
      <template #header>自定义头部</template>
      <template #name>自定义内容</template>
    </d-edit-table>
  </div>
</template>

<script lang="ts" setup>
  import { ElMessage } from 'element-plus'
  import { ref } from 'vue'

  const tableData = ref([{ date: '2016-05-02', name: '', address: 'No. 189, Grovs' }])
  const createRow = () => {
    tableData.value.push({ date: '', name: '', address: '' })
  }
  const columns = [
    { showIndex: true, width: 50, align: 'center' },
    { label: '日期', prop: 'date', cType: 'date' },
    {
      label: '姓名',
      prop: 'name',
      headerSlot: 'header',
      slot: 'name'
    },
    { label: '地址', prop: 'address', cType: 'input' },
    {
      label: '操作',
      cType: 'operation',
      formChildConfig: {
        update: {
          type: 'warning'
        },
        confirm: {
          type: 'danger'
        }
      }
    }
  ]
  const dEditTableRef = ref<InstanceType<typeof DEditTable> | null>(null)
  const confirmRow = (row: any) => {
    console.log('row: ', row)
    ElMessage.success('确定')
  }
  const cancellRow = (row: any) => {
    console.log('row: ', row)
    ElMessage.success('取消')
  }
</script>
<style scoped lang="scss">
  ::v-deep(.el-table) {
    .even-row {
      background-color: #fae7f0;
    }
    .odd-row {
      background-color: #f8e7d9;
    }
  }
  .create-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2px 0;
    border: 1px dashed red;
    border-radius: 5px;
    margin: 5px 2px;
    cursor: pointer;
  }
</style>
